import React from 'react'
import { Button, Drawer, Form, Input, Space } from 'antd'
import { inject, observer } from 'mobx-react'
import HomeStore from '../../../stores/HomeStory'
import { CloumnType } from '../../../components/form/FormPlus'

interface AddUserDrawerProps {
  HomeStore: HomeStore
  cloumns: Array<CloumnType>
}

const AddUserDrawer: React.FC<AddUserDrawerProps> = (
  props: AddUserDrawerProps
) => {
  const { HomeStore, cloumns } = props
  const [form] = Form.useForm()

  const onClose = () => {
    HomeStore.changeAddUserDrawerVisible()
  }

  return (
    <>
      <Drawer
        title='Basic Drawer'
        placement='right'
        onClose={onClose}
        width={400}
        visible={HomeStore.addUserDrawerVisible}
        footer={
          <Space size={4}>
            <Button type='primary'>提交</Button>
            <Button type='primary' onClick={onClose}>
              取消
            </Button>
          </Space>
        }
      >
        <Form
          form={form}
          name='add_user'
          wrapperCol={{ span: 16 }}
          labelCol={{ span: 8 }}
        >
          {cloumns.map((item) => (
            <Form.Item
              key={item.key}
              name={item.key}
              label={
                HomeStore.language === 'en_US'
                  ? item.key
                  : item.name ?? item.key
              }
              rules={[
                {
                  required: true,
                  message: 'Input something!',
                },
              ]}
            >
              <Input placeholder='placeholder' />
            </Form.Item>
          ))}
        </Form>
      </Drawer>
    </>
  )
}

export default inject('HomeStore')(observer(AddUserDrawer))
